<template>
    <div class="jianzhan-content">
        <Crumb name="供应商"/>
        <div class="content">
            <el-button @click="openDialog" icon="el-icon-plus" size="small" type="primary">新增供应商</el-button>
            <div class="search" style="margin-top: 20px;">
                <el-input v-model="key" placeholder="查询供应商" class="input" size="small" prefix-icon="el-icon-search"></el-input>
            </div>
            <div class="table-wrapper">
                <el-table
                        :data="vendorList.filter(item => !key || item.chineseName.toLowerCase().includes(key.toLowerCase())).slice((pageNum-1)*pageSize,pageNum*pageSize)"
                        row-key="id"
                        border
                        stripe
                >
                    <el-table-column
                            prop="englishName"
                            label="英文名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="chineseName"
                            label="中文名称"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="supplierCode"
                            label="供应商代码"
                    >
                    </el-table-column>
                    <el-table-column >
                        <template slot-scope="customer">
                            <el-button type="primary" icon="el-icon-edit" size="small" @click="openEdit(customer.row)">修改</el-button>
                            <el-button icon="el-icon-location" size="small" type="primary"
                                       @click="addressPage(customer.row)">地址
                            </el-button>
                            <el-button icon="el-icon-phone" size="small" type="primary"
                                       @click="contactPage(customer.row)">联系人
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="page">
                    <el-pagination background
                                   :page-size="pageSize"
                                   @current-change="changePage"
                                   layout="prev, pager, next"
                                   :total="total"></el-pagination>
                </div>
            </div>
        </div>
        <Address :visible="addressShow" :supplierId="supplierId" @close="addressShow = false"> </Address>
        <Contact :visible="contactShow" :supplierId="supplierId" @close="contactShow = false"> </Contact>
        <el-dialog :visible.sync="dialogVisible" title="供应商">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px">
                <el-form-item label="中文名称" prop="chineseName">
                    <el-input v-model="ruleForm.chineseName"></el-input>
                </el-form-item>
                <el-form-item label="英文名称" prop="englishName">
                    <el-input v-model="ruleForm.englishName"></el-input>
                </el-form-item>
                <el-form-item label="供应商代码">
                    <el-input v-model="ruleForm.supplierCode"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                        <el-button @click="dialogVisible = false">取消</el-button>
                        <el-button type="primary" @click="submitForm">确认</el-button>
                    </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import mixins from '../../util/mixins'
    import {ERROR_OK} from "../../util/config";
    import {getVendorList,addVendor,modVendor} from "../../api/jianzhan";
    import Address from '../../views/jianzhan/address'
    import Contact from '../../views/jianzhan/contact'

    export default {
        name: "customer",
        mixins: [mixins],
        props:['belongModule'],
        data() {
            return {
                addressShow: false,
                contactShow: false,
                key: '',
                vendorList:[],
                ruleForm: {
                    chineseName:'',
                    supplierCode:'',
                    englishName:''
                },
                rules: {
                    chineseName: [
                        { required: true, message: '供应商名称必须填写', trigger: 'blur' },
                    ],
                },
                dialogVisible: false,
            }
        },
        created() {
            this.getVendorList()
        },

        methods: {
            //提交新增／修改供应商表单
            submitForm(){
                this.$refs.ruleForm.validate(async valid=> {
                    if(valid){
                        const {id,chineseName,englishName,supplierCode} = this.ruleForm;
                        if(!id){ //新增
                            const {status,msg} = await addVendor({chineseName,englishName,supplierCode,belongModule:this.belongModule});
                            if(status === ERROR_OK) {
                                this.dialogVisible = false;
                                this.$notify.success('新增成功');
                                this.getVendorList();
                                this.clear();
                            } else {
                                this.$notify.error(msg)
                            }
                        } else { //修改
                            const {status,msg} = await modVendor({id,chineseName,englishName,supplierCode,belongModule:this.belongModule});
                            if(status === ERROR_OK) {
                                this.dialogVisible = false;
                                this.$notify.success('修改成功');
                                this.clear();
                            } else {
                                this.$notify.error(msg)
                            }
                        }
                    }
                })
            },
            clear(){
                this.ruleForm= {
                    id:'',
                    chineseName: '',
                    supplierCode:'',
                    englishName: '',
                }
            },
            openEdit(vendor){
                this.ruleForm = vendor;
                this.dialogVisible = true
            },
            async getVendorList() {
                const {status, data} = await getVendorList(this.belongModule);
                if (status === 0) {
                    this.vendorList = data;
                    this.total = data.length
                }
            },
            async contactPage(customer) {
                this.supplierId = customer.id;
                this.contactShow = true
            },

            addressPage(customer) {
                this.supplierId = customer.id;
                this.addressShow = true
            },
            openDialog() {
                this.dialogVisible = true;
            }
        },
        components: {
            Crumb, Address, Contact
        }
    }
</script>

<style scoped lang="scss">
    @import '../../css/mixins';

    .jianzhan-content {
        position: relative;
    }

    .content {
        @include content
    }
</style>